<style lang="less">
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: 0 0 0 1000px white inset !important;
}

#signin .ivu-select-single .ivu-select-selection {
  height: 36px !important;
}
#signin .ivu-select-single .ivu-select-selection .ivu-select-placeholder,
#signin .ivu-select-single .ivu-select-selection .ivu-select-selected-value {
  height: 35px !important;
  line-height: 35px !important;
  text-align: left !important;
}
#signin .ivu-card-body li {
  margin-left: 0 !important;
}
</style>

<style lang="less" scoped>
@import "../../assets/css/config.less";
#signin {
  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB,
    Microsoft YaHei, SimSun, sans-serif;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: @header-bgc;
}
.flex-space-between{
  display: flex;
  justify-content: space-between;
  flex-direction: row;
}
.verify_code{
  width: 150px;
  margin-left: 20px;
}
.input-icon {
  width: 32px;
  height: 36px;
  background-color: #f8f8f9;
  border: 1px solid #dcdee2;
  border-radius: 4px 0 0 4px;
  border-right: none;
}
.input-row {
  display: flex;
  align-items: center;
}
.bg {
  position: absolute;
}
.form {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 360px;
  text-align: center;
  margin-top: 50px;
  p {
    font-size: 30px;
  }
}
.ft {
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: center;
  width: 300px;
}
.ft a {
  font-size: 14px;
  text-decoration: none;
  color: @color1;
}
.button {
  line-height: 24px;
  background-color: @color1;
  color: @white;
  border-radius: 4px;
  font-size: 14px;
  // margin: 15px 0 0;
  width: 100%;
  letter-spacing: 2px;
  outline: none;
  border: none;
  cursor: pointer;
  letter-spacing: 15px;
  box-shadow: none;
}
.button:hover {
  background-color: @color2;
  box-shadow: none;
  color: @white;
}
.button:active {
  background-color: @color3;
  box-shadow: none;
  color: @white;
}
</style>
<template>
  <div id="signin">
    <Row type="flex" justify="center">
      <Col span="5">
        <Card class="form">
          <div slot="title">注册</div>
          <Form ref="formInline" :model="formInline" :rules="ruleInline">
            <FormItem prop="username">
              <Input
                type="text"
                v-model="formInline.username"
                placeholder="用户名: 请输入3-10个字母/汉字/数字/下划线"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input
                type="password"
                v-model="formInline.password"
                placeholder="密码: 请输入6-20个非空白字符"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-lock-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="repassword">
              <Input
                type="password"
                v-model="formInline.repassword"
                placeholder="确认密码"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-lock-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="schoolName">
              <Select
                style="text-align: left"
                size="large"
                v-model="formInline.schoolName"
                placeholder="请选择您的学校名称"
                label-position="left"
              >
                <Option value="北京邮电大学">北京邮电大学</Option>
                <Option value="else">其他</Option>
              </Select>
            </FormItem>
            <FormItem
              v-if="formInline.schoolName === 'else'"
              prop="schoolName2"
            >
              <Input
                type="text"
                v-model="formInline.schoolName2"
                placeholder="请输入您的学校名称"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="stuNo">
              <Input
                type="text"
                v-model="formInline.stuNo"
                placeholder="学号"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="realName">
              <Input
                type="text"
                v-model="formInline.realName"
                placeholder="真实姓名"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="email">
              <Input
                type="text"
                v-model="formInline.email"
                placeholder="邮箱"
                size="large"
                @on-enter="handleSubmit('formInline', formInline)"
              >
                <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
              </Input>
            </FormItem>
            <FormItem prop="verifycode">
              <div class="flex-space-between">
                <Input
                  type="text"
                  v-model="formInline.verifycode"
                  placeholder="请输入验证码"
                  size="large"
                  @on-enter="handleSubmit('formInline', formInline)"
                >
                  <!-- <Icon slot="prepend" type="ios-ice-cream-outline"></Icon> -->
                </Input>
                <div class="verify_code">
                  <verify-code :email="formInline.email" type="signin"/>
                </div>
              </div>
            </FormItem>
            <FormItem>
              <Button
                :disabled="disabled"
                @click="handleSubmit('formInline', formInline)"
                class="button"
                >注册</Button
              >
            </FormItem>
          </Form>
          <Spin size="large" fix v-if="disabled"></Spin>
        </Card>
      </Col>
    </Row>
  </div>
</template>

<script>
import {
  requestSignin,
  checkUserDuplicate,
  getIdent,
  duplicatStuNo,
} from "../../api/api";
import * as coreJS from "../../utils/core";
import verifyCode from '../../components/verifyCode'
export default {
  name: "signin",
  mounted() {
    var result = this.$route.query;
    if (result["msg"] == "new") {
      getIdent({ ident: result.ident }).then((res) => {
        this.$data.UUID = res.UUID;
        this.$data.token = res.token;
      });
    }
  },
  data() {
    var validateUser = (rule, value, cb) => {
      checkUserDuplicate({ username: value }).then((res) => {
        var pattern = /^[\w\u4e00-\u9fa5]{3,10}$/g;
        if (res.duplicate == true) {
          cb(new Error("用户名重复"));
        } else if (value === "") {
          cb(new Error("请输入昵称"));
        } else if (!pattern.test(value)) {
          cb(new Error("请输入3-10个字母/汉字/数字/下划线"));
        } else {
          cb();
        }
      });
    };
    var validaterealName = (rule, value, cb) => {
      var pattern = /^[\u4e00-\u9fa5]{2,}$/g;
      if (value === "") {
        cb(new Error("请输入您的真实姓名"));
      } else if (!pattern.test(value)) {
        cb(new Error("请输入2个以上中文字符"));
      } else {
        cb();
      }
    };
    var validatestuNo = (rule, value, cb) => {
      var pattern = /^\d{7,15}$/g;
      if (value === "") {
        cb(new Error("请输入您的学号"));
      } else if (!pattern.test(value)) {
        cb(new Error("请输入7到15位数字学号"));
      } else {
        cb();
      }
    };
    var validatePwd = (rule, value, cb) => {
      var pattern = /^\S{6,20}$/g;
      if (value === "") {
        cb(new Error("请输入密码"));
      } else if (!pattern.test(value)) {
        cb(new Error("请输入6-20个非空白字符"));
      } else {
        if (this.formInline.repassword !== "") {
          this.$refs.formInline.validateField("repassword");
        }
        cb();
      }
    };
    var validateCheckPwd = (rule, value, cb) => {
      if (value === "") {
        cb(new Error("请再次输入密码"));
      } else if (value !== this.formInline.password) {
        cb(new Error("两次输入密码不一致!"));
      } else {
        cb();
      }
    };
    var validateEmail = (rule, value, cb) => {
      var pattern1 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
      var pattern2 = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})+\.([a-zA-Z]{2,4})$/;
      if (value === "") {
        cb(new Error("请输入邮箱地址"));
      } else if (!pattern1.test(value) && !pattern2.test(value)) {
        cb(new Error("请输入合法的邮箱地址"));
      } else {
        cb();
      }
    };

    return {
      disabled: false,
      UUID: "",
      token: "",
      checkDuplicate: "",
      formInline: {
        username: "",
        password: "",
        repassword: "",
        schoolName: "",
        schoolName2: "",
        stuNo: "",
        realName: "",
        verifycode: "",
      },
      ruleInline: {
        username: [{ validator: validateUser, trigger: "change" }],
        password: [{ validator: validatePwd, trigger: "change" }],
        repassword: [{ validator: validateCheckPwd, trigger: "change" }],
        schoolName: [
          { required: true, message: "请输入学校名称", trigger: "change" },
        ],
        schoolName2: [
          { required: true, message: "请输入学校名称", trigger: "change" },
        ],
        stuNo: [
          { required: true, validator: validatestuNo, trigger: "change" },
        ],
        realName: [
          { required: true, validator: validaterealName, trigger: "change" },
        ],
        email: [
          { required: true, validator: validateEmail, trigger: "change" },
        ],
        verifycode: [
          { required: true, message: "请输入验证码", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    mdpassword: function () {
      return coreJS.encryptedPassword(this.formInline.password);
    },
  },
  components: {
    'verify-code': verifyCode
  },
  methods: {
    handleSubmit(name, form) {
      let realSchoolName = "";
      if (form.schoolName === "else") {
        realSchoolName = form.schoolName2;
      } else {
        realSchoolName = form.schoolName;
      }
      this.$refs[name].validate((valid) => {
        if (valid) {
          duplicatStuNo({
            stuNo: form.stuNo,
            school: realSchoolName,
          })
            .then((response) => {
              if (response.state === true) {
                this.checkDuplicate = response.duplicate;
                if (!this.checkDuplicate) {
                  let that = this;
                  that.disabled = true;
                  var signinParams = {
                    username: form.username,
                    stuNo: form.stuNo,
                    school: realSchoolName,
                    realName: form.realName,
                    password: this.mdpassword,
                    sex: form.sex,
                    email: form.email,
                    verifycode: form.verifycode
                    // UUID: this.$data.UUID,
                    // token: this.$data.token
                  };
                  requestSignin(signinParams)
                    .then((response) => {
                      that.disabled = false;
                      if (response.state === true) {
                        this.$Message.success("注册成功");
                        this.$router.push("/login");
                      } else {
                        this.$Message.error(response.msg);
                      }
                    })
                    .catch((error) => {
                      that.disabled = false;
                      this.$Message.error(error.status);
                    });
                } else {
                  this.$Message.error("该学号已被注册");
                }
              } else {
                this.$Message.error("注册失败！");
              }
            })
            .catch((error) => {
              this.$Message.error("注册失败！");
            });
        } else {
          this.$Message.error("信息不完整");
        }
      });
    },
  },
};
</script>
